<template>
    <div>
        <div class="box" id="tuoyunContent">
            <div class="flex justify_between align_center" style="padding: 12px 0;">
                <a-image class="logoImg" src="/logo.png"></a-image>
                <div class="title" style="font-size: 18px;font-weight: 600;">货 物 托 运 单</div>
                <div class="flex align_center">
                    <div>NO：</div>
                    <div class="no">{{props.row.yundanhao}}</div>
                </div>
            </div>
            <div class="flex">
                <div class="flex_1">
                    <div class="flex justify_between" style="margin-bottom:8px">
                        <div>{{props.row.transport_type == 1?'集装箱':props.row.transport_type == 2?'整车':'批量快运'}}</div>
                        <div>车种车号：{{props.row.car_type}} {{props.row.car_no}}</div>
                        <div>办理日期：{{props.row.process_time}}</div>
                        <div>打印人：{{props.user.nickname}}</div>
                        <div>打印时间：{{newDete}}</div>
                    </div>
                    <div class="border">
                        <div class="flex ">
                            <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                <div class="flex align_center">
                                    <div >托运人</div>
                                </div>
                            </div>
                            <div class="flex flex_column flex_1 text_center">
                                <div class="flex">
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >发站</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 110px;">
                                        <div class="flex align_center">
                                            <div >{{props.row.fzs?.name || ''}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >专用线</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: calc(50% - 290px);">
                                        <div class="flex align_center">
                                            <div >{{props.row.sending_station_special}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >经办人</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 100px;">
                                        <div class="flex align_center">
                                            <div >{{props.row.shipper_agent}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >取货地址</div>
                                        </div>
                                    </div>
                                    <div class="padd12  bor_b center flex_1" style="padding: 4px 0;">
                                        <div class="flex align_center">
                                            <div ></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex">
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >名称</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: calc(50% - 90px);">
                                        <div style="text-align:left; width: 100%; padding:0 10px;">
                                            <div >{{props.row.shipper}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >手机号</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 100px;">
                                        <div class="flex align_center">
                                            <div >{{props.row.shipper_phone}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >取货电话</div>
                                        </div>
                                    </div>
                                    <div class="padd12  bor_b center flex_1" style="padding: 4px 0;">
                                        <div class="flex align_center">
                                            <div ></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex ">
                            <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                <div class="flex align_center">
                                    <div >收货人</div>
                                </div>
                            </div>
                            <div class="flex flex_column flex_1 text_center">
                                <div class="flex">
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >到站</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 110px;">
                                        <div class="flex align_center">
                                            <div >{{props.row.dzs?.name || ''}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >专用线</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center" style="padding: 4px 0;width: calc(50% - 290px);">
                                        <div class="flex align_center">
                                            <div >{{props.row.arrive_station_special}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >经办人</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 100px;">
                                        <div class="flex align_center">
                                            <div >{{props.row.customer_handler}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >送货地址</div>
                                        </div>
                                    </div>
                                    <div class="padd12  bor_b center flex_1" style="padding: 4px 0;">
                                        <div class="flex align_center">
                                            <div >{{props.row.peisong_address != null?props.row.peisong_address.address :""}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex">
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >名称</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: calc(50% - 90px);">
                                        <div style="text-align:left; width: 100%; padding:0 10px;">
                                            <div >{{props.row.dept?.name}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >手机号</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 100px;">
                                        <div class="flex align_center">
                                            <div >{{props.row.customer_tel}}</div>
                                        </div>
                                    </div>
                                    <div class="padd12 bor_r bor_b center " style="padding: 4px 0;width: 90px;">
                                        <div class="flex align_center">
                                            <div >送货电话</div>
                                        </div>
                                    </div>
                                    <div class="padd12  bor_b center flex_1" style="padding: 4px 0;">
                                        <div class="flex align_center">
                                            <div v-if="props.row.service_type == 2||props.row.service_type == 4">{{props.row.shipping_tel}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex ">
                            <div class="flex flex_1 text_center">
                                <div class="padd12 bor_r bor_b center" style="width: 90px;">
                                    <div>服务方式</div>
                                </div>
                                <div class=" padd12 bor_r bor_b flex justify_around flex_1" >
                                    <div class="flex align_center">
                                        <div> 门到站</div>
                                        <div style="line-height:6px; width: 10px;height: 10px;border: 1px solid #000; border-radius: 50%;margin-left: 2px;">
                                            {{props.row.service_type == '3' ? '✔':''}}
                                        </div>
                                    </div>
                                    <div class="flex align_center">
                                        <div> 站到站</div>
                                        <div style="line-height:6px; width: 10px;height: 10px;border: 1px solid #000; border-radius: 50%;margin-left: 2px;">
                                            {{props.row.service_type == '1' ? '✔':''}}
                                        </div>
                                    </div>
                                    <div class="flex align_center">
                                        <div> 门到门</div>
                                        <div style="line-height:6px; width: 10px;height: 10px;border: 1px solid #000; border-radius: 50%;margin-left: 2px;">
                                            {{props.row.service_type == '4' ? '✔':''}}
                                        </div>
                                    </div>
                                    <div class="flex align_center">
                                        <div> 站到门</div>
                                        <div style="line-height:6px; width: 10px;height: 10px;border: 1px solid #000; border-radius: 50%;margin-left: 2px;">
                                            {{props.row.service_type == '2' ? '✔':''}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex flex_1  text_center">
                                <div class="padd12 bor_r bor_b center" style="width: 90px;">
                                    <div>付款方式</div>
                                </div>
                                <div class=" padd12  bor_b flex justify_around flex_1" style="">
                                    <div class="flex align_center">
                                        <div> 预付款</div>
                                        <div style="line-height:6px; width: 10px;height: 10px;border: 1px solid #000; border-radius: 50%;margin-left: 2px;">
                                            {{props.row.pay_order[0].pay_type == 'money' ? '✔':''}}
                                        </div>
                                    </div>
                                    <div class="flex align_center">
                                        <div> 周期结算</div>
                                        <div style="line-height:6px; width: 10px;height: 10px;border: 1px solid #000; border-radius: 50%;margin-left: 2px;">
                                            {{props.row.pay_order[0].pay_type == 'periodic' ? '✔':''}}
                                        </div>
                                    </div>
                                    <div class="flex align_center">
                                        <div> 现金</div>
                                        <div style="line-height:6px; width: 10px;height: 10px;border: 1px solid #000; border-radius: 50%;margin-left: 2px;">
                                            {{props.row.pay_order[0].pay_type == 'now_pay' ? '✔':''}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>品名</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>件数</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>包装</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>重量(吨)</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>箱型</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>箱号</div>
                            </div>
                            
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>体积</div>
                            </div>
                            <div class="padd12  bor_b center flex_1" >
                                <div>计费重量</div>
                            </div>
                        </div>
                        <div class="flex" v-for="(ite,inx) in props.row.goods_data" :key="inx" style="min-height: 31px;">
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>{{handleGoodsName(ite.goods_id) || ''}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>{{ite.number_yu || ''}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>{{ite.package || ''}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>{{(ite.hz_weight - 0).toFixed(3) == '0.000'?'':(ite.hz_weight - 0).toFixed(3) || ''}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>{{ite.box_type || ''}}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>{{ite.box || ''}}</div>
                            </div>
                            
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>{{ite.volume || ''}}</div>
                            </div>
                            <div class="padd12  bor_b center flex_1" >
                                <div>{{(ite.jf_weight - 0).toFixed(3) == '0.000'?'':(ite.jf_weight - 0).toFixed(3) || ''}}</div>
                            </div>
                        </div>
                        <div class="flex" >
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>合计</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>{{ heji.number }}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div></div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>{{ (heji.hz_weight - 0).toFixed(3) }}</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div></div>
                            </div>
                            
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div></div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div></div>
                            </div>
                            <div class="padd12  bor_b center flex_1" >
                                <div>{{ (heji.jf_weight - 0).toFixed(3) }}</div>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>收费项目</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>金额</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>收费项目</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>金额</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>收费项目</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>金额</div>
                            </div>
                            <div class="padd12 bor_r bor_b center flex_1" >
                                <div>收费项目</div>
                            </div>
                            <div class="padd12  bor_b center flex_1" >
                                <div>金额</div>
                            </div>
                        </div>
                        <div class="flex flex_wrap">
                            <div class=" flex" v-for="(ite,inx) in zhangdanList" :key="inx" style="width: 25%;min-height: 31px;">
                                <div class="padd12 bor_r bor_b center flex_1 " >
                                    <div>{{ite.pay_name}}</div>
                                </div>
                                <div class="padd12  bor_b center flex_1" :class="inx % 4 == 3?'':'bor_r'">
                                    <div>{{ite.pay_real_price}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="flex flex_1">
                                <div class="padd12 bor_r bor_b center "  style="width: 25%;">
                                    <div>合计</div>
                                </div>
                                <div class="padd12 bor_r bor_b center flex_1"  >
                                    <div>{{ zhangdanHeji.pay_real_price }}</div>
                                </div>
                            </div>
                            <div class="flex flex_1">
                                <div class="padd12 bor_r bor_b center "  style="width: 25%;">
                                    <div>大写</div>
                                </div>
                                <div class="padd12  bor_b center flex_1"  >  
                                    <div>{{convertToChineseCapital(zhangdanHeji.pay_real_price)}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex">
                            <!-- <div class="flex flex_1">
                                <div class="padd12 bor_r bor_b center "  style="width: 25%;">
                                    <div>服务说明</div>
                                </div>
                                <div class="padd12 bor_r bor_b center flex_1"  >
                                    <div style="width: 100%;">
                                        <a-textarea placeholder="" allow-clear style="width: 100%;" />
                                    </div>
                                </div>
                            </div> -->
                            <div class="flex flex_1">
                                <div class="padd12 bor_r bor_b center "  style="width: 12.5%;">
                                    <div>备注</div>
                                </div>
                                <div class="padd12  bor_b center flex_1"  >
                                    <div style="width: 100%;">
                                        <a-textarea placeholder="" allow-clear style="width: 100%;" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="flex flex_1">
                                <div class="padd12 bor_r  center " style="width: 25%;padding:10px 12px" >
                                    <div>承运人签字</div>
                                </div>
                                <div class="padd12   bor_r center flex_1"  >
                                    <div></div>
                                </div>
                            </div>
                            <div class="flex flex_1">
                                <div class="padd12 bor_r  center " style="width: 25%;padding:10px 12px" >
                                    <div>收货人签字</div>
                                </div>
                                <div class="padd12   center flex_1"  >
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        <div style="margin-top: 20px;" class="flex justify_end">
            <a-button  type="primary" v-print="printObj" v-if="count == 0">打印</a-button>
            <a-button  type="primary" @click="showCount = true" v-else >打印</a-button>
        </div>
        <a-modal :mask-closable="false" 
            v-model:visible="showCount"
            width="600px"
            title="提示"
            ok-text="打印"
            :footer="false"
        >
            <div class="flex justify_center align_center" style="height: 100px;">
                <div>已打印{{count}}次，确定打印？</div>
            </div>
            <div class="flex justify_end">
                <a-button v-print="printObj" type="primary">打印</a-button>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive, onMounted } from "vue";
import predictionDeriverOrder from "@/api/prediction/predictionDeriverOrder";
import tool from '@/utils/tool'
import { request } from "@/utils/request.js";
const props = defineProps({
    row:{
        default:{}
    },
    user:{
        default:{}
    }
})
const count = ref(0)
const showCount = ref(false)
const newDete = ref(tool.dateFormat(
			Math.round(new Date().getTime() / 1000).toString(),
			"yyyy-MM-dd hh:mm:ss"
		))
const zhangdanList = ref([])
const goods_list = ref([])
const zhangdanHeji = ref({
    pay_real_price:0
})
const heji = ref({
    number:0,
    hz_weight:0,
    jf_weight:0
})
onMounted(()=>{
    request({
      url: '/financial/payOrder/index',
      method: 'get',
      params:{
        page:1,
        pageSize:100,
        prediction_id:props.row.ids.split(',')
      }
    }).then(res=>{
      if(res.code == 200){
        let arrs = []
        let _data = res.data.items
        _data.map((v,i)=>{
          let arr = []
          v.detail.map((vv,ii)=>{
            vv.no_tax_price = (vv.no_tax_price - 0 ).toFixed(2)
            vv.tax_price = (vv.tax_price - 0 ).toFixed(2)
            vv.pay_real_price = (vv.pay_real_price - 0 ).toFixed(2)
            vv.pay_price = (vv.pay_price - 0 ).toFixed(2)
            vv.discount_price = (vv.discount_price - 0 ).toFixed(2)
            if(vv.pay_real_price != '0.00' && vv.is_confirm == 1){
              arr.push(vv)
            }
          })
          v.detail = arr
        })
        let zongPriceArr = []
        _data.map((v,i)=>{
            zongPriceArr.push(...v.detail)
        })

        arrs = zongPriceArr
        
        let quchongArr = []
        arrs.map((v,i)=>{
            v.pay_real_price = (v.pay_real_price - 0)
            quchongArr.push(v.pay_name)	
        })
        quchongArr = [...new Set(quchongArr)]   // 去重
        let hebingArr = arrs.reduce((acc, item) => {
            if (quchongArr.includes(item.pay_name)) {
                const existing = acc.find((x) => x.pay_name === item.pay_name);
                if (existing) {
                    existing.pay_real_price += (item.pay_real_price - 0);
                // 如果 name 不同，可以拼接或保留第一个（这里保留第一个 name）
                } else {
                acc.push({ ...item }); // 复制对象，避免引用问题
                }
            }
            return acc;
        }, []);
        hebingArr.map((v,i)=>{
            v.pay_real_price = (v.pay_real_price - 0).toFixed(2)
        })
        let pushArr = []
        if(hebingArr.length < 16){
            for(let i = 0;i<(16 - hebingArr.length);i++){
                pushArr.push({pay_name:'',pay_real_price:''})
            }
        }
        hebingArr.map((v,i)=>{
            zhangdanHeji.value.pay_real_price = (v.pay_real_price - 0) + zhangdanHeji.value.pay_real_price
        })
        zhangdanHeji.value.pay_real_price = (zhangdanHeji.value.pay_real_price - 0).toFixed(2)
        hebingArr = [...hebingArr,...pushArr]
        zhangdanList.value = hebingArr
        
        console.log('账单：',zhangdanList.value)
      }
    })
    console.log(props.row)
    props.row.goods_data.map((v,i)=>{
        heji.value.number = (v.number_yu != ''?v.number_yu - 0:0) + heji.value.number
        heji.value.hz_weight = (v.hz_weight != ''?v.hz_weight - 0:0) + heji.value.hz_weight
        heji.value.jf_weight = (v.jf_weight != ''?v.jf_weight - 0:0) + heji.value.jf_weight
    })
    request({
      url: '/goods/manage/index',
      method: 'get',
      params:{
        page:1,
        pageSize:10000,
      }
    }).then(res=>{
        goods_list.value = res.data.items
    })
    console.log(props.user)
    handlegetCount()
})
const handlegetCount = () => {
    predictionDeriverOrder
       .getCount({ type: 6, link_id: props.row.id})
       .then((res) => {
            console.log(res)
            count.value = res.data.count
        }); 
 }
const handleGoodsName = (id)=>{
    let name = ''
    goods_list.value.map((v,i)=>{
        if(v.id == id){
            name = v.name
        }
    })
    return name
}
const printObj = {
    id: "tuoyunContent",
    popTitle: "页面打印",
    openCallback: (vue) => {
        predictionDeriverOrder
            .getprintSave({ type: 6, link_id: props.row.id})
            .then((res) => {
                showCount.value = false
                handlegetCount()
            });
    },
};
const convertToChineseCapital = (num) => {
    // let num = 0
    // props.row.detail.map((v,i)=>{
    //     num += (v.pay_real_price - 0)
    // })
    var strOutput = "";
    var strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分';
    num += "00";
    var intPos = num.indexOf('.');
    if (intPos >= 0) {
        num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
    }
    strUnit = strUnit.substr(strUnit.length - num.length);
    for (var i=0; i < num.length; i++) {
        strOutput += '零壹贰叁肆伍陆柒捌玖'.substr(num.substr(i,1),1) + strUnit.substr(i,1);
    }
    return strOutput.replace(/零角零分$/, '整').replace(/零[仟佰拾]/g, '零').replace(/零{2,}/g, '零').replace(/零([亿|万])/g, '$1').replace(/零+元/, '元').replace(/亿零{0,3}万/, '亿').replace(/^元/, "零元");
}
</script>

<style lang="less" scoped>
.box {
    width: 297mm;
    height: 210mm;
    padding: 10mm 15mm 10mm;
    box-sizing: border-box;
    position: relative;
}

.title {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        width: 120%;
        height: 1px;
        background: #000;
        bottom: 0px;
        left: -10%;
    }
}

.no {
    color: red;
    font-weight: 600;
}

.logoImg {
    
    width: 200px;
}

.border {
    border: 1px solid rgba(0, 0, 0, 1);
}

.bor_r {
    border-right: 1px solid rgba(0, 0, 0, 1);
}

.bor_b {
    border-bottom: 1px solid rgba(0, 0, 0, 1);
}

.padd12 {
    padding: 4px 10px;
    box-sizing: border-box;
}

.text_center {
    text-align: center;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>